<template>
	<!-- <div class="box">
		<swiper :options="swiperOption" ref="mySwiper">
    	<swiper-slide v-for="item of swiperList" :key="item.id"><img src="item.imgUrl" alt="" class="slide-img"></swiper-slide>
    	<div class="swiper-pagination"  slot="pagination"></div>
  	</swiper>
	</div> -->
	<div class="wrapper">
    <swiper :options="swiperOption" v-if="showSwiper">
      <swiper-slide v-for="item of swiperList" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl" />
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
	name: 'headSlider',
	data () {
		return {
			notNextTick: true,
			swiperOption: {// 轮播图属性设置
				loop: true,
				autoplay: 500,
				pagination : '.swiper-pagination',
			}
		}
	},
	props: {
		swiperList: Array,
	},
	 computed: {
     showSwiper () {
       return this.swiperList.length
     }
   }
}
</script>
<style scoped>
	.wrapper {
		overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 31.25%;
	}
	.swiper-img {
		width: 100%;
	}
	/* 若是调整插件的样式应当使用样式穿透，因为该页面内 的样式已经被限制，不能对其他文件的样式产生影响 */
</style>


